import React,{Component} from 'react';

import { Layout, Button } from 'antd';

import Object3d from '../3d';
import { saveConfigure } from '../3d/editor/ctrl'

import "./index.less";

import AddDevice from '../../../components/addDevice.jsx';
import Soil from '../../../components/Soil.jsx';
import Params from '../../../components/effect.jsx';

import gps from './img/gps.jpg';
import jiaoche from './img/jiaoche.jpg';
import diaojia from './img/diaojia.jpg';
import nimen from './img/jiaoche.jpg';
import shoupen from './img/shoupeng.jpg';
import shouchui from './img/shouchui.jpg';
import dingpen from './img/jiaoche.jpg';
import congcangkou from './img/jiaoche.jpg';

const { Header, Content, Sider } = Layout;

class CreateShip extends Component{
    constructor(props){
        super(props);
        this.state = {
            // 设备
            is_choose:1,            
            deviceData:[
                {id:1,val:"左耙",icon:jiaoche,selected:false},
                {id:2,val:"右耙",icon:diaojia,selected:false},
                {id:3,val:"GPS",icon:gps,selected:false},
                {id:4,val:"泥门",icon:nimen,selected:false},
                {id:5,val:"艏喷",icon:shoupen,selected:false},
                // {id:6,val:"艏吹",icon:shouchui,selected:false},
                // {id:7,val:"顶喷",icon:dingpen,selected:false},
                // {id:8,val:"冲仓口",icon:congcangkou,selected:false},
            ],
            // 传感器
            shoupen:false,
            shouchui:false,
            chongcang:false,
            yiliu:false,
            // 效果参数
            diaosheng:1,
            paonisudu:1,
            nimenkaiqisudu:1,
            shoupensudu:1,
            chongcangsudu:1
        }
    }
    render(){
        return(
            <div id="createShip">
                <Layout>
                    <Header>
                        <div>
                            <div className="title">
                                当前船体<span></span><Button type="primary" onClick={ () => this.comfirm()}>保存</Button>
                            </div>
                        </div>
                    </Header>
                    {/* <Layout> */}
                    <Layout style={{height:'calc(100vh - 114px)'}}>
                        <Sider width={60} style={{height:'100%'}}>
                            <ul>
                                <li onClick={ ()=> this.create_transfrom(1)} className={this.state.is_choose===1?"active":""}>
                                    <img src={require('./img/add.jpg')} alt="" />
                                </li>
                                <li onClick={ ()=> this.create_transfrom(2)} className={this.state.is_choose===2?"active":""}>
                                <img src={require('./img/soil.jpg')} alt=""/>
                                </li>
                                <li onClick={ ()=> this.create_transfrom(3)} className={this.state.is_choose===3?"active":""}>
                                <img src={require('./img/params.gif')} alt=""/>
                                </li>
                            </ul>
                        </Sider>
                        <Content>
                            <div className="chooseDetil">
                                <div className="choose" style={{display:this.state.is_choose===1?"flex":"none"}}>
                                    <AddDevice _this={this}/>
                                </div>
                                <div className="choose" style={{display:this.state.is_choose===2?"flex":"none"}} >
                                    <Soil _this={this}/>
                                </div>
                                <div className="choose" style={{display:this.state.is_choose===3?"flex":"none"}} >
                                    <Params _this={this}/>
                                </div>
                            </div>
                            <div className="add_model">
                                <Object3d app='editor' />
                            </div>
                        </Content>
                    </Layout>
                </Layout>
            </div>
        )
    }
    // componentDidMount(){
    //     this.getRequestData();
    // }
    // 左边切换
    create_transfrom(e){
        if( e===1 ){
            this.setState({
                is_choose:1
            })
            return
        }else if( e === 2 ){
            this.setState({
                is_choose:2
            })
            return
        }else{
            this.setState({
                is_choose:3
            })
        }        
    }
    // 确定
    comfirm(){
        // console.log("oo")
        saveConfigure();
    }

}
export default CreateShip;